<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1024 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M512 1010.002c-274.77 0-498.35-223.57-498.35-498.34C13.65 237.23 237.23 13.65 512 13.65S1010.35 237.23 1010.35 512 786.77 1010.002 512 1010.002zm0-955.392c-252.242 0-457.39 205.148-457.39 457.052 0 252.242 205.148 457.38 457.39 457.38S969.39 763.904 969.39 512c0-252.242-205.148-457.39-457.39-457.39z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M525.65 320.174H512c-72.704 0-142.674-8.192-207.534-24.238-58.02-14.336-127.314-41.646-172.708-67.584-9.902-5.806-12.974-18.094-7.516-27.986 5.806-9.902 18.094-12.974 27.996-7.516 42.322 24.576 107.172 49.838 161.792 63.488 61.778 15.36 128.338 22.876 197.97 22.876h7.168c33.454 0 55.634 0 90.45-4.444 11.264-1.362 21.504 6.492 22.876 17.756 1.362 11.264-6.492 21.504-17.756 22.866-34.816 4.434-58.368 4.782-89.088 4.782zm268.974-48.476c-8.53 0-16.384-5.12-19.456-13.65-3.758-10.578 1.71-22.528 12.626-25.938 24.576-8.54 46.08-21.504 66.908-34.14 4.772-2.724 9.216-5.458 13.988-8.192 9.902-5.796 22.19-2.386 27.996 7.516 5.796 9.892 2.386 22.18-7.516 27.986-4.434 2.734-9.216 5.458-13.65 8.192-22.528 13.65-46.08 27.648-74.414 37.55-2.048.338-4.096.676-6.482.676zM892.59 819.2c-3.758 0-7.516-1.024-10.926-3.072-40.274-25.6-104.786-58.03-164.178-72.704-29.696-7.506-48.476-10.926-80.896-15.36a20.419 20.419 0 0 1-17.756-22.866 20.419 20.419 0 0 1 22.876-17.756c34.468 4.444 54.272 8.192 85.668 16.046 64.174 15.698 133.12 50.514 176.128 77.824 9.564 6.144 12.288 18.77 6.492 28.334-4.096 6.144-10.588 9.554-17.408 9.554zm-763.904 0c-6.83 0-13.312-3.41-17.408-9.554-6.144-9.564-3.072-22.19 6.482-28.334 40.274-25.6 111.616-61.44 179.2-78.162 53.934-13.66 95.232-20.142 151.552-23.214 11.264-.686 20.818 8.192 21.504 19.456.686 11.264-8.192 20.818-19.456 21.504-53.586 3.072-92.498 8.878-143.698 21.842-59.054 14.684-126.3 47.104-167.26 73.052-3.41 2.386-7.168 3.41-10.916 3.41zm860.16-285.696H366.93c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h621.916c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm-811.008-1.024H35.84c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h141.998c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M279.89 620.206h-7.506c-59.054 0-109.23-45.742-114.35-104.448-.338-3.072-.338-6.492-.338-10.24 0-63.488 51.538-115.036 115.026-115.036 1.71 0 3.758 0 5.468.348 1.7 0 3.072 0 4.772.338 58.716 5.12 104.796 55.296 104.796 114.688 0 3.41 0 7.506-.686 11.95-4.782 54.61-49.838 98.304-105.472 102.4h-1.71zm-81.234-110.592c0 .676.338 1.362.338 2.048 3.072 37.888 35.164 67.922 73.39 67.922h6.83c35.492-3.072 64.512-31.406 67.236-66.222 0-1.024.348-2.048.348-2.724.338-1.024.338-3.072.338-4.782 0-37.888-29.01-70.318-66.56-73.728-1.362 0-3.072 0-4.434-.338h-3.072c-40.96 0-74.076 33.106-74.076 74.066-.338 1.024-.338 2.734-.338 3.758zm-.338-1.71c0 .338 0 .686.338 1.024 0-.338-.338-.686-.338-1.024zm506.88-107.52c-63.488 0-115.036-51.538-115.036-115.026 0-1.71 0-3.42.348-5.468v-4.434c4.096-50.862 42.322-93.184 92.498-103.086.338 0 .686 0 1.024-.338 7.168-1.024 13.998-2.048 20.818-2.048 39.936 0 77.824 21.166 98.304 55.634a114.872 114.872 0 0 1 16.732 59.392c0 46.766-27.996 88.75-71.342 106.496-.338 0-.338.348-.686.348-14.336 5.796-28.672 8.53-42.66 8.53zM631.47 278.19c0 1.362 0 3.072-.348 4.434v2.734c0 40.96 33.116 74.066 74.076 74.066 8.868 0 18.432-1.71 28.324-5.458a74.445 74.445 0 0 0 45.742-68.608c0-13.312-3.758-26.624-10.578-38.236a74.189 74.189 0 0 0-63.488-35.84c-3.758 0-7.854.348-14.684 1.372a74.301 74.301 0 0 0-59.044 65.536z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M512 1010.35c-3.41 0-6.83 0-10.926-.348-98.304-6.82-183.972-105.472-229.028-263.168-15.022-52.9-23.9-91.812-28.334-146.084-1.024-11.264 7.506-21.166 18.77-22.19 11.264-1.024 21.166 7.506 22.19 18.77 4.096 50.862 12.626 87.726 26.962 137.902 40.284 140.626 112.302 228.014 192.86 233.81h.676a95.54 95.54 0 0 0 13.998 0h.686c80.548-5.458 152.914-92.836 192.85-233.81 19.456-68.27 29.696-145.746 29.696-223.918 0-52.9-3.41-90.45-11.95-138.578-2.048-11.264 5.468-21.842 16.384-23.89 11.264-2.048 21.852 5.458 23.9 16.384 9.216 50.176 12.626 91.136 12.626 146.084 0 81.582-10.926 162.816-31.058 234.844-45.056 158.034-130.734 256.338-229.038 263.168-4.434 1.024-7.854 1.024-11.264 1.024zm32.768-182.958c-62.464 0-114.35-50.862-115.026-113.326 0-64.512 51.538-116.736 115.026-116.736s115.026 51.548 115.026 115.036c0 1.7 0 3.41-.338 5.458v4.434c-5.458 60.078-54.61 105.134-114.688 105.134zm0-189.102c-41.646 0-74.066 33.116-74.066 75.438.676 39.936 33.792 72.704 74.066 72.704a73.83 73.83 0 0 0 73.728-66.898c0-1.372 0-2.734.338-4.444v-2.724c0-40.96-33.106-74.076-74.066-74.076zM267.264 430.418h-2.048c-11.264-1.024-19.456-11.264-18.432-22.528 5.806-58.368 14.674-102.4 32.768-156.672 46.08-141.988 129.024-230.4 221.184-237.22 4.096-.348 7.854-.348 11.264-.348 84.654 0 153.262 56.668 203.438 168.284 4.772 10.24 0 22.528-10.24 26.962-10.24 4.782-22.528 0-26.972-10.24C635.218 103.086 579.246 54.61 512 54.61c-2.386 0-5.458 0-7.168.348h-.686c-75.09 5.12-144.384 83.282-185.344 209.234-17.06 51.886-25.252 91.822-30.72 147.794a20.992 20.992 0 0 1-20.818 18.432z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc9 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
